import React, { useEffect } from 'react'
// @ts-ignore
// @ts-ignore
// import {fn} from 'demo2/tools'
// console.log(1111111)
// console.log(fn)
export default function PageA() {
  const send = ()=>{
    const data = {
      name : '某车',
      like:  '前端'
    }
    //负责发布消息
    let frame = document.getElementById('frame'); 
    // @ts-ignore
    const targetWindow = frame?.contentWindow;//得到目标窗口的引用
    console.log(targetWindow);
    targetWindow.postMessage(data, 'http://localhost:9001'); //发送新消息
  }
  const sendAll = ()=>{
    let frame = document.getElementById('frame'); 
    // @ts-ignore
    const targetWindow = frame?.contentWindow;//得到目标窗口的引用
    const message = '所有人都要接收！'; // 要发送的消息
    targetWindow.postMessage(message, '*'); // 发送消息，将第二个参数设置为'*'，表示可以向任何窗口发送消息
  }
  useEffect(()=>{
     //也监听信息
     window.onmessage = function(event) {
      console.log('window1', `来自于${event.origin}的信息：`,{ful:event,origin:event.origin,data:event.data},event.data);
    }
  },[])
  return (
    <div>
        <div><h2>window1</h2><button onClick={send}>发送给iframe数据</button></div>
        <div><h2>window1</h2><button onClick={sendAll}>发送给目标window所有在监听postMessage的窗口</button></div>
        <iframe id='frame' src='http://localhost:9001' width={1200} height={500}></iframe>
    </div>
  )
}
